<template>
  <div class="user">
    <div class="right-con">
      <div>
        <div class="mb30">
          <el-row>
            <el-col :span="8">
              <el-input
                v-model="entryTxt"
                placeholder="请输入用户昵称"
                :change="txtnull()">
              </el-input>
            </el-col>
            <el-col :span="2">
              <div class="pl15">
                <el-button
                  @click="searchList()"
                  type="info">
                  查询
                </el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-table
            :data="tableList"
            style="width: 100%">
            <el-table-column
              prop="id"
              label="用户ID">
            </el-table-column>
            <el-table-column
              prop="nickname"
              label="用户昵称">
            </el-table-column>
            <el-table-column
              prop="coin_buy"
              label="充值总额">
            </el-table-column>
            <el-table-column
              prop="coin"
              label="剩余金额">
            </el-table-column>
            <el-table-column
              prop="created_at"
              label="注册日期">
            </el-table-column>
            <el-table-column
              label="操作">
              <template scope="props">
                <el-button
                  class="fs14"
                  type="text"
                  size="small"
                  @click="lookfn(props.row.id,props.row.nickname)">
                  赠送金币
                </el-button>
                <el-button class="fs14" type="text" size="small" @click="lookList(props.row.id)">
                  流水记录
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <page-ctrl
            v-if="pageData"
            :page_data="pageData"
            v-on:sentLengthfn="sentLengthfn"
            v-on:firstfn="firstData"
            v-on:nextfn="nextData"
            v-on:prefn="preData"
            v-on:lastfn="lastData">
          </page-ctrl>
        </div>
      </div>
    </div><!--.right-con-->
    <div v-if="loading" class="loadingbox"></div>
    <give-cion :model_data="modelData" :is_look="dialogTableVisible" v-on:closefn="closemodel"></give-cion>
  </div><!--.user-->
</template>

<script type="text/ecmascript-6">
  import api from '../../assets/js/api';
  import pageCtrl from '../common/pageCtrl'
  import giveCion from '../common/giveCion'

  export default {
    name: "user",
    data() {
      return {
        pageData: null,
        searchTxt: '',
        entryTxt: '',
        page: 1,
        per_page: 5,
        tableData: null,
        tableList: null,
        is_moreData: false, //是否有更多
        is_preData: false,//是否有上一页
        tableDataLength: null, //总长度
        pages: null, //总页数
        is_change: false,
        loading: false,
        modelData:null,
        dialogTableVisible:false
      }
    },
    mounted: function () {
      this.getlist();
    },
    components: {
      pageCtrl,
      giveCion
    },
    methods: {
      getlist: function () {
        this.loading = true;
        api.fetch("/api/admin/users?page="
          + this.page
          + "&per_page="
          + this.per_page
          + "&nickname="
          + this.searchTxt)
          .then(res => {
            this.pageData = res.meta;
            this.pageData.page = this.page;
            this.tableData = res;
            this.pageData.tableDataLength = res.meta.pagination.total; //总长度
            this.pageData.pages = Math.ceil(this.pageData.tableDataLength / this.per_page); //总页数
            let getLengthData = res.meta.pagination.count;
            this.tableList = res.data;
            if (this.page <= 1) {
              this.pageData.is_preData = false;
            } else {
              this.pageData.is_preData = true;
            }
            if (getLengthData < this.per_page) {
              this.pageData.is_moreData = false;
            } else {
              this.pageData.is_moreData = true;
            }
            if (this.pages == this.page) {
              this.pageData.is_moreData = false;
              this.loading = false;
            }
            this.loading = false;
          }).catch();
      },
      firstData: function () {
        this.page = 1;
        this.getlist();
      },
      nextData: function () {
        this.page++;
        this.getlist();
      },//下一页
      preData: function () {
        this.page--;
        this.getlist();
      },//上一页
      lastData: function () {
        let pagelength = this.pageData.pages;
        this.page = pagelength;
        this.getlist();
      },//尾页
      sentLengthfn: function (lengthData) {
        this.page = 1;
        this.per_page = lengthData;
        this.getlist();
      }, //设置长度
      searchList: function () {

        if (this.entryTxt == '') {
          return
        } else {
          this.page = 1;
          this.searchTxt = this.entryTxt;
          this.getlist();
          this.is_change = true;
        }
      }, //搜索
      txtnull: function () {
        if (this.is_change == true) {
          if (this.entryTxt == '') {
            this.searchTxt = '';
            this.page = 1;
            this.getlist();
            this.is_change = false;
          }
        }
      },
      lookfn: function (id,nickname) {
        let obj={};
        obj.id=id;
        obj.nickname=nickname
        this.modelData=obj
        this.dialogTableVisible = true
      },//查看
      closemodel: function (off) {
        this.dialogTableVisible = off;
      },//关闭弹框
      lookList:function(id){
        this.$router.push("/countBox/countCoin?id="+id);
      }
    }
  }
</script>

<style scoped>
  .user {
    height: 100%;
    min-width: 1200px;
  }
</style>
